<template>
  <div class="page">
    <div class="time"></div>
    <!-- 时间 ..电量 信号 -->
    <header>
      <span
        ><img
          class="img1"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/pskxjeko5ayqrjeirece3jt9z1q70tgfg76ac5848-48e3-4d3e-9901-26ebca5b322f"
          alt=""
        />&nbsp; 郑州</span
      >
      <span
        ><img
          class="img3"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psqqxwral303ijz29urnl298z619pu8vk775c0a818-086e-4811-8ccf-098eaf9047ef"
          alt=""
      /></span>
      <input type="text" placeholder="" />
      <span
        ><img
          class="img2"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psem3iyw85oz8zkwpeoouv9kqrqrry8mgd4beb8e9-f09a-40ca-8ebe-1ed24eae6fbf"
          alt=""
      /></span>
    </header>

    <div class="list">
      <p @click="$router.push('/photo')">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psxz6tvrxxugcgubbei06euav0k0g11aans3afe67ff-0e5c-4642-9f77-e80abb0aaf23"
        />
        <span>拍婚纱</span>
      </p>

      <p @click="$router.push('/travel')">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psfxfcw78vjlkk5t1cvlboi84nxpa20zw945c3e8970-f9c1-4db9-9528-15b944e40374"
        />
        <span>去旅拍</span>
      </p>
      <p @click="$router.push('/serve')">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psb884tey0p4pe5mwkcapxpkiq3vgyc3nkf569f5fd7-f6bf-491e-8e82-55c4bbfaded5"
        />
        <span>找婚庆</span>
      </p>
      <p @click="$router.push('/wedding')">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/pszffffpv9qt9pwylyqe9kln6t25wkefxf59fb954d9-0749-47fe-b797-61649bf9d4b5"
        />
        <span>订喜宴</span>
      </p>

      <p>
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps2n4px0dszqh1fzwtga684fn23m7xxz7vf2a9605f0-4c5f-48bd-863d-b5b7cf1b3606"
          @click="$router.push('/dress')"
        />
        <span>选婚纱</span>
      </p>
      <p @click="$router.push('/vajra')">
        <img
          class="img4"
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/ps4jbplor20aor5ab0id3b4e3vmb0hotd8907af07-013c-432b-9a5a-5839d63a7590"
        />

        <span>四大金刚</span>
      </p>
      <p @click="$router.push('/ring')">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psf6nvalnez9jnkziq5fhazandmb65fql5ke1875832-9283-4c21-9211-fa4c0911da71"
        />
        <span>定制婚戒</span>
      </p>
      <p @click="$router.push('/game')">
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psha9qzyjilos9nvjx3hrgzdm2dp4pqzb2d05ec9dda-b182-4a08-a3d1-4a157f342a1f"
        />
        <span>迎亲游戏</span>
      </p>

      <p>
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/psiltc98exhaqrint87kk2g4by2dj153ds785bcb0d-2c11-49ee-8abb-10f3e0ece010"
        />
        <span>结婚任务</span>
      </p>
      <p>
        <img
          src="https://lanhu.oss-cn-beijing.aliyuncs.com/pssb6jzqcf47dm2rylfpj3cq35cctog71hp101e5c56-085f-48d9-aa4c-78e451671fdb"
        />
        <span>结婚百科</span>
      </p>
    </div>

    <div class="main">
      <div class="main_d1">
        <span>
          <i>精选推荐</i>
          <van-cell is-link class="vancell" @click="showPopup"></van-cell>
        </span>
        <van-popup
          closeable
          close-icon="success"
          v-model:show="show"
          round
          position="bottom"
          :style="{ height: '93%', color: 'block' }"
        >
          <div class="intip">
            <p>感兴趣标签推荐</p>
            <p>
              禧家针对个人筹婚偏好
              <br />
              为您提供更好的服务
            </p>
          </div>
          <div class="popup">
            <ul>
              <li
                class="popup_public"
                v-for="item in list"
                :key="item"
                @click="item.show = !item.show"
                :class="{ active1: item.show }"
              >
                {{ item.name }}
              </li>
            </ul>
          </div>
        </van-popup>
      </div>
      <div class="main_d2"><span>初见之欢，久处亦怦然</span></div>
    </div>

    <div class="inner">
      <!-- 复制1 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psmoiqhqag8ziudqzjlzwo2j2aenmf5smbc9680f0df-b38e-4265-ae71-5d0b1064570e"
            alt=""
          />
          <div class="inner_list_en">
            <p class="inner_list_en1">文艺的盛夏&nbsp;&nbsp;不一样的婚礼</p>
            <p class="inner_list_en2">
              《古摄影》官方账号
              <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psv1v6ce7077al01juq6fud5ajyso9dryv0c0eb47f-0eb3-417c-8e82-c04e2976390a"
                alt=""
              />
            </p>
          </div>
        </div>
      </div>
      <!-- 复制2 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psmoiqhqag8ziudqzjlzwo2j2aenmf5smbc9680f0df-b38e-4265-ae71-5d0b1064570e"
            alt=""
          />
          <div class="inner_list_en">
            <p class="inner_list_en1">文艺的盛夏&nbsp;&nbsp;不一样的婚礼</p>
            <p class="inner_list_en2">
              《古摄影》官方账号
              <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psv1v6ce7077al01juq6fud5ajyso9dryv0c0eb47f-0eb3-417c-8e82-c04e2976390a"
                alt=""
              />
            </p>
          </div>
        </div>
      </div>
      <!-- 复制3 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psmoiqhqag8ziudqzjlzwo2j2aenmf5smbc9680f0df-b38e-4265-ae71-5d0b1064570e"
            alt=""
          />
          <div class="inner_list_en">
            <p class="inner_list_en1">文艺的盛夏&nbsp;&nbsp;不一样的婚礼</p>
            <p class="inner_list_en2">
              《古摄影》官方账号
              <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psv1v6ce7077al01juq6fud5ajyso9dryv0c0eb47f-0eb3-417c-8e82-c04e2976390a"
                alt=""
              />
            </p>
          </div>
        </div>
      </div>
      <!-- 复制4 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psmoiqhqag8ziudqzjlzwo2j2aenmf5smbc9680f0df-b38e-4265-ae71-5d0b1064570e"
            alt=""
          />
          <div class="inner_list_en">
            <p class="inner_list_en1">文艺的盛夏&nbsp;&nbsp;不一样的婚礼</p>
            <p class="inner_list_en2">
              《古摄影》官方账号
              <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psv1v6ce7077al01juq6fud5ajyso9dryv0c0eb47f-0eb3-417c-8e82-c04e2976390a"
                alt=""
              />
            </p>
          </div>
        </div>
      </div>
      <!-- 复制5 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psmoiqhqag8ziudqzjlzwo2j2aenmf5smbc9680f0df-b38e-4265-ae71-5d0b1064570e"
            alt=""
          />
          <div class="inner_list_en">
            <p class="inner_list_en1">文艺的盛夏&nbsp;&nbsp;不一样的婚礼</p>
            <p class="inner_list_en2">
              《古摄影》官方账号
              <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psv1v6ce7077al01juq6fud5ajyso9dryv0c0eb47f-0eb3-417c-8e82-c04e2976390a"
                alt=""
              />
            </p>
          </div>
        </div>
      </div>
      <!-- 复制6 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psmoiqhqag8ziudqzjlzwo2j2aenmf5smbc9680f0df-b38e-4265-ae71-5d0b1064570e"
            alt=""
          />
          <div class="inner_list_en">
            <p class="inner_list_en1">文艺的盛夏&nbsp;&nbsp;不一样的婚礼</p>
            <p class="inner_list_en2">
              《古摄影》官方账号
              <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psv1v6ce7077al01juq6fud5ajyso9dryv0c0eb47f-0eb3-417c-8e82-c04e2976390a"
                alt=""
              />
            </p>
          </div>
        </div>
      </div>
      <!-- 复制7 -->
      <div class="inner_list">
        <div class="inner_list_img">
          <img
            src="https://lanhu.oss-cn-beijing.aliyuncs.com/psmoiqhqag8ziudqzjlzwo2j2aenmf5smbc9680f0df-b38e-4265-ae71-5d0b1064570e"
            alt=""
          />
          <div class="inner_list_en">
            <p class="inner_list_en1">文艺的盛夏&nbsp;&nbsp;不一样的婚礼</p>
            <p class="inner_list_en2">
              《古摄影》官方账号
              <img
                src="https://lanhu.oss-cn-beijing.aliyuncs.com/psv1v6ce7077al01juq6fud5ajyso9dryv0c0eb47f-0eb3-417c-8e82-c04e2976390a"
                alt=""
              />
            </p>
          </div>
        </div>
      </div>
    </div>

    <footer></footer>
  </div>
</template>
<script>
import { ref } from "vue";
export default {
  data() {
    return {
      showCode: false,
      list: [
        {
          name: "婚纱照",
          show: false,
        },
        {
          name: "婚纱礼服",
          show: false,
        },
        {
          name: "婚礼策划",
          show: false,
        },
        {
          name: "四大金刚",
          show: false,
        },
        {
          name: "婚宴酒店",
          show: false,
        },
        {
          name: "伴手礼",
          show: false,
        },
        {
          name: " 蜜月行",
          show: false,
        },
        {
          name: "新欢礼物",
          show: false,
        },
        {
          name: "订婚流程",
          show: false,
        },
        {
          name: " 婚房布置",
          show: false,
        },
        {
          name: "旅拍",
          show: false,
        },
        {
          name: " 结婚流程",
          show: false,
        },
        {
          name: "婚嫁首饰",
          show: false,
        },
        {
          name: "结婚登记",
          show: false,
        },
        {
          name: " 路痴",
          show: false,
        },
        {
          name: " 结婚钻戒",
          show: false,
        },
        {
          name: "备婚攻略",
          show: false,
        },
        {
          name: "家装",
          show: false,
        },
      ],
    };
  },
  setup() {
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };
    return {
      show,
      showPopup,
    };
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.page {
  width: 7.5rem;
  font-size: 0.3rem;
  font-family: "微软雅黑";
}
.time {
  width: 100%;
  height: 1rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 12;
  background-color: white;
}
header {
  width: 100%;
  margin: -0.01rem auto;
  display: flex;
  height: 0.7rem;
  justify-content: space-between;
  position: fixed;
  top: 0.99rem;
  z-index: 12;
  background-color: white;
  padding: 0.01rem 5%;
  box-sizing: border-box;
}

header .img1 {
  width: 0.2rem;
  height: 0.23rem;
}
header .img2 {
  width: 0.28rem;
  height: 0.28rem;
  margin: 0.1rem 0 0 0.18rem;
}

header input {
  height: 0.46rem;
  width: 4.6rem;
  border: 0.008rem solid rgba(51, 51, 51, 1);
  border-radius: 0.08rem;
  outline: none;
  position: relative;
  text-indent: 0.6rem;
}
header .img3 {
  width: 0.23rem;
  height: 0.23rem;
  margin: 0.1rem 0 0 0.18rem;
  position: absolute;
  z-index: 998;
  margin-top: 0.12rem;
  margin-left: 0.5rem;
}
.list {
  widows: 88%;
  margin: 1.9rem auto;
  margin-bottom: 0.2rem;
  height: 3rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.list p {
  width: 17%;
  height: 1.24rem;

  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.list p span {
  color: rgba(51, 51, 51, 1);
  font-size: 0.22rem;
  margin-top: 0.1rem;
}

.list p .img4 {
  width: 0.92rem;
  height: 0.92rem;
  padding: 0.2rem 0.2rem;
  box-sizing: border-box;
  background-color: rgb(242, 215, 227);
  border-radius: 50%;
}
.list p img {
  width: 0.9rem;
  height: 0.9rem;
}
.main {
  width: 98%;
  height: 1rem;
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 1.5rem;
  z-index: 12;
  background-color: white;
  padding: 0.2rem 0.2rem;
  box-sizing: border-box;
}
.main .main_d1 {
  height: 0.6rem;
  width: 2.7rem;
  background-color: rgb(215, 215, 215);
  text-align: center;
  line-height: 0.5rem;
  .vancell {
    width: 0.5rem;
    height: 0.5rem;
    background-color: rgb(215, 215, 215);
  }
  span {
    display: flex;
    justify-content: center;
    i {
      margin-top: 0.08rem;
    }
  }
  .intip {
    width: 50%;
    margin-top: 0.5rem;
    p:last-child {
      margin-top: 0.5rem;
    }
  }

  .popup {
    width: 90%;
    overflow: scroll;
    margin: 0.3rem auto;
    /*   border: 0.01rem saddlebrown solid; */
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      .active1 {
        background-color: red;
        color: white;
      }

      li {
        width: 26%;
        height: 0.8rem;
        margin-left: 0.35rem;
        margin-top: 0.4rem;
        border: 0.01rem black solid;
        line-height: 0.8rem;
        text-align: center;
      }
    }
  }
}
.main .main_d2 {
  font-size: 0.22rem;
  text-align: center;
  line-height: 0.5rem;
}
.inner {
  width: 90%;
  margin: 0.3rem auto;
  display: flex;
  flex-wrap: wrap;
}
.inner_list {
  width: 3rem;
  height: 3.8rem;
  margin-left: 0.2rem;
  margin-top: 0.2rem;
  background-color: red;
}
.inner_list_img img {
  width: 3rem;
  height: 3.8rem;
}
.inner_list_img {
  position: relative;
}
.inner_list_en {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 0px 10px 10px 0px;
  width: 3rem;
  height: 0.94rem;
  position: absolute;
  bottom: 0;
}

.inner_list_en1 {
  font-size: 0.24rem;
}
.inner_list_en2 {
  margin-top: 0.1rem;
  display: flex;
  justify-content: space-around;
  font-size: 0.2rem;
}
.inner_list_en2 img {
  margin-top: 0.09rem;
  width: 0.2rem;
  height: 0.2rem;
}

footer {
  width: 100%;
  height: 0.98rem;
  margin: auto;
  // background-color: red;
}
</style>
